<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%"
    :height="`calc(100vh - ${props.height}px)`"
    header-row-class-name="table-header-row"
    table-layout="fixed"
  >
    <el-table-column type="index" label="序号" width="80" />
    <el-table-column
      v-for="item in tableCols"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
    >
      <template #default="{ row, column }">
        {{ formatColumnLabel(row, column) }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200px">
      <template #default="{ row }">
        <TableOperations
          :row="row"
          :visible-size="4"
          :operations="tableOperate"
          :class-name="'extra-operation'"
          @click="handleOperateClick"
        ></TableOperations>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-if="isShowPagination"
    class="justify-end pt-3"
    :current-page="state.page"
    :page-size="state.pageSize"
    :page-sizes="[10, 20, 30, 40]"
    background
    layout="sizes, prev, pager, next"
    :total="state.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
  </el-pagination>
</template>
<script setup lang="ts">
import { ref, reactive, defineProps, defineEmits } from "vue";
import { ColumnItem } from "./interface/index"
import TableOperations from "@/components/table/tableOperate/index.vue";

const props = defineProps({
  tableCols: {
    type: Array<ColumnItem>,
    default: () => {
      return []
    }
  }, // 表格列
  tableData: {
    type: Array,
    default: () => {
      return []
    }
  }, // 表格数据
  tableOperate: {
    type: Array,
    default: () => {
      return []
    }
  }, // 表格操作数据
  isShowPagination: {
    type: Boolean,
    default: true
  }, // 是否显示分页
  height: {
    type: Number,
    default: () => {
      return 220
    }
  } // 表格要减掉的高度
})

const emit = defineEmits(['sizeChange', 'currentChange', 'operateClick'])

const state = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})

const handleSizeChange = (val: number) => {
  emit('sizeChange', val)
}

const handleCurrentChange = (val: number) => {
  emit('currentChange', val)
}

const formatColumnLabel = (row: any, column: any) => {
  // if (column.property === "name") {
  //   return row.name.toUpperCase();
  // }
  return row[column.property] ? row[column.property] : '-';
}

const handleOperateClick = (operate: string, row: any) => {
  emit('operateClick', operate, row)
  }

</script>

<style lang="scss" scoped></style>
